import React, { useEffect, useState } from 'react';
//引入scss
import '../../../../scss/zw/StaffManageSearch.scss'

//组件
import { Form, Button, Input, Select } from 'antd';

//图标
import {
    SearchOutlined, PlusCircleOutlined, DeleteOutlined
} from '@ant-design/icons';

//请求
import { Staff_Search } from '../../../../tools/api'

//引入自定义钩子函数
//员工状态
import { useStaffLeaveList } from "../../../../hooks/zwHooks/index";
//员工职位
import { useStaffManageJob } from "../../../../hooks/zwHooks/index";

function StaffManageSearch(props) {
    //定义组件状态
    //调用钩子函数，定义员工职位列表
    const [staffManageJob, setStaffManageJob] = useStaffManageJob([])
    //调用钩子函数，获取员工状态列表
    const [staffLeaveList, setStaffLeaveList] = useStaffLeaveList()
    //员工管理列表数据
    var [staffManageList, setStaffManageList] = useState([])

    //新增表单框是否显示
    var [isModalOpen, setIsModalOpen] = useState(false);


    //分页
    var [page, setPage] = useState(1);  ///页码
    var [total, setTotal] = useState(0);   //总数
    var [pageSize, setPageSize] = useState(10);   //每页的个数


    // 点击搜索
    const onSearch = (value) => {
        console.log(value);

        //保存搜所的关键词
        // setSearchkey(value)
        Staff_Search({}).then((res) => {
            console.log(res)
            setStaffManageList(res.data)
        })
    }

    //新增弹框显示
    const shouModal = (values) => {
        setIsModalOpen(true);
    }
    //新增弹框的取消
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <div className="staffManageSearch">
            <Form
                // form={form}
                onValuesChange={onSearch} className="search"
            >
                <Form.Item label="员工账号" className="formItem">
                    <Input placeholder="请输入员工账号" />
                </Form.Item>
                <Form.Item label="员工姓名" className="formItem">
                    <Input placeholder="请输入员工姓名" />
                </Form.Item>
                <Form.Item
                    label="员工职位"
                    name="job"
                    rules={[{ required: true, message: '选择职位' }]}
                >
                    <Select
                        style={{ width: 120 }}
                        options={staffManageJob}
                    />
                </Form.Item>
                <Form.Item
                    label="员工状态"
                    name="leave"
                    rules={[{ required: true, message: '选择状态' }]}
                >
                    <Select
                        style={{ width: 120 }}
                        options={staffLeaveList}
                    />
                </Form.Item>
                <Form.Item className="formItem" className="formItem">
                    <Button type="primary" icon={<SearchOutlined />}>搜索</Button>
                </Form.Item>
            </Form>
            <div classNam="staffManageButton">
                <Button type="primary" icon={<DeleteOutlined />}>删除</Button>
                <Button type="primary" icon={<PlusCircleOutlined />} onClick={shouModal}>添加</Button>
            </div>
        </div>
    );
}

export default StaffManageSearch;